<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.rotate.js" type="text/javascript"></script>
    <style media="screen">
        body {
            background: #C7FFC6;
        }
        #box {
            position: relative;
            width: 100%;
            height: 100%;
        }
        #m0 {
            position: absolute;
            z-index: -1;
        }
        #m1 {
            position: absolute;
            z-index: 2;
        }
        #m2 {
            position: absolute;
            z-index: 1;
        }
        #m3 {
            position: absolute;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <img id="m0" src="">
        <img id="m1" src="">
        <img id="m2" src="">
        <img id="m3" src="">
    </div>
</body>


<script>
    var src3 = 'img/w1.png';
    var src2 = 'img/z1.png';
    var src1 = 'img/n1.png';
//    var src0 = 'img/0.png';
//    var im0 = new Image();
    var im1 = new Image();
    var im2 = new Image();
    var im3 = new Image();
    var ok0, ok1, ok2, ok3;
//    im0.onload = function() {
//        ok0 = true;
//        if (ok0 && ok1 && ok2 && ok3) {
//            start();
//        }
//    };
    im1.onload = function() {
        ok1 = true;
        if (ok1 && ok2 && ok3) {
            start();
        }
    };
    im2.onload = function() {
        ok2 = true;
        if (ok1 && ok2 && ok3) {
            start();
        }
    };
    im3.onload = function() {
        ok3 = true;
        if (ok1 && ok2 && ok3) {
            start();
        }
    };
//    im0.src = src0;
    im1.src = src1;
    im2.src = src2;
    im3.src = src3;
    function start () {
        $('#m3').attr('src', src3);
        $('#m2').attr('src', src2);
        $('#m1').attr('src', src1);
//        $('#m0').attr('src', src0);
        var bw = $('body').width();
        var m3w = $('#m3').width();
        if (m3w > bw) {
            $('#m3').css({width: bw});
            $('#m0').css({width: bw});
            var bl = bw / m3w;
            $('#m2').css({width: $('#m2').width() * bl});
            $('#m1').css({width: $('#m1').width() * bl});
        }
        var ww3 = $('#m3').width();
        var ww2 = $('#m2').width();
        var ww1 = $('#m1').width();
        var top1 = (ww3 - ww1) / 2;
        var top2 = (ww3 - ww2) / 2;
        // 计算中心点
        var cx = $('#m3').width() / 2;
        var cy = $(window).height() / 2;

        $('#m1').css({left: top1, top: top1});
        $('#m2').css({left: top2, top: top2});
        var marginTop = ($(window).height() - $('#m3').height()) / 2;
        $('#box').css({marginTop: marginTop});

        var p0, p1;
        var oldD = 0;
        var obj;
        function handleTouchEvent(event) {
            obj = $(event.target);
            //只跟踪一次触摸
            if (event.touches.length == 1) {
                var output = document.getElementById("output");
                switch (event.type) {
                    case "touchstart":
                        var x = event.touches[0].clientX;
                        var y = event.touches[0].clientY;
                        oldD = obj.css('rotate') && parseFloat(obj.css('rotate'));
                        p0 = [x - cx, cy - y];
                        break;
                    case "touchend":
                        var x = event.touches[0].clientX;
                        var y = event.touches[0].clientY;
                        p0 = null;
                        break;
                    case "touchmove":
                        event.preventDefault(); //阻止滚动
                        var x = event.touches[0].clientX;
                        var y = event.touches[0].clientY;
                        if (!p0) {
                            p0 = [x - cx, cy - y];
                        }
                        p1 = [x - cx, cy - y];
                        zhuan(p0, p1);
                        break;
                }
            }
        }
        document.addEventListener("touchstart", handleTouchEvent, false);
        document.addEventListener("touchend", handleTouchEvent, false);
        document.addEventListener("touchmove", handleTouchEvent, false);

        function zhuan(p0, p1) {
            if (!p0 || !p1) {
                return;
            }
            var r0 = getRotate(p0);
            var r1 = getRotate(p1);
            var d = r0 - r1;
            if (!obj.is('#m3') && !obj.is('#m2') && !obj.is('#m1')) {
                return;
            }
            obj.css('rotate', d + oldD);
        }

        function getRotate(arr) {
            var d = function(arr) {
                var d = 0;
                var x = arr[0];
                var y = arr[1];
                if (x == 0 && y < 0) {
                    d = 270;
                    return d;
                } else if (x == 0) {
                    d = 90;
                    return d;
                } else if (y == 0 && x < 0) {
                    d = 180;
                    return d;
                } else if (y == 0) {
                    d = 0;
                    return d;
                }
                var bi = Math.atan(Math.abs(y) / Math.abs(x));
                d = 180 / Math.PI * bi;
                if (x > 0 && y > 0) {
                    return d;
                }
                if (x < 0 && y > 0) {
                    return 180 - d;
                }
                if (x < 0 && y < 0) {
                    return 180 + d;
                }
                if (x > 0 & y < 0) {
                    return 360 - d;
                }
                return d;
            }(arr);
            return d;
        }
    }
</script>
</html>
